import React, {useState} from 'react';
import {useDispatch} from 'react-redux';
import {updateMarkdownEditorContent} from "../../../disposition/redux/action";
import MarkdownEditor from "../../../disposition/texteditor/Markdown";
import './Architect.css';
import './Responsive.css';
// import LabelSelector from "./labelselector/LabelSelector";

const ArticleEditor = () => {

    const [markdownContent, setMarkdownEditorContent] = useState(""); // 在父组件中保存Markdown内容的状态
    const dispatch = useDispatch();

    const handlePublish = () => {
        // 将Markdown内容更新到Redux store中
        dispatch(updateMarkdownEditorContent(markdownContent));
        console.log('success')
    };

    return (
        <div className="article-editor-container">
            <div className="article-editor-header">
                <div>
                    <input className="article-editor-title-input" placeholder="请在这里输入标题"/>
                </div>
            </div>
            <div className="article-editor-markdown">
                <div className="article-editor-inputboard">
                    <MarkdownEditor TextChange={setMarkdownEditorContent} />
                </div>
            </div>
            <div className="article-editor-bottom">
                <div className="article-editor-manipulate">
                    <div className="article-editor-bottom-left">
                        <div className="article-editor-draft">
                            <button>保存草稿</button>
                        </div>
                        {/*尚未完善的标签选择功能*/}
                        {/*<LabelSelector/>*/}
                    </div>
                    <div className="article-editor-bottom-right">
                        <div className="article-editor-cancel">
                            <button>取消</button>
                        </div>
                        <div className="article-editor-publish">
                            <button onClick={handlePublish}>发表博客</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default ArticleEditor;
